<template>
  <view class="Account">
    <view class="top-wrap">
      <view class="bg-circle left"></view>
      <view class="bg-circle right"></view>
      <view class="info-wrap flex text-white" @tap="doLoginOrLogout">
        <view class="avatar cu-avatar round margin-left"
              :style="hasLogIn ? `background-image:url(${avatar});` : ''">
          <text v-if="!hasLogIn" class="cuIcon-people"></text>
        </view>
        <view class="text-wrap margin-left-xl align-center flex">
          <template v-if="hasLogIn">
            <view @tap.stop="toProfile" style="height: 100%" class="flex flex-direction justify-around">
              <view class="text-bold text-xl">{{username}}</view>
              <view class="text-sm status no" v-if="!isFilledData" >未完善个人资料</view>
              <view class="text-sm status bg-gradual-green" v-else>已完善个人资料</view>
            </view>
          </template>
          <template v-else>
            <view class="text-bold text-xl">点击授权登录</view>
          </template>
        </view>
        <view @tap.stop="toProfile" class="cuIcon-right icon-wrap flex justify-end align-center margin-right-lg"></view>
      </view>
    </view>

    <view class="middle-wrap flex padding-lr-xl" v-if="hasLogIn">
      <view class="flex-sub margin-xs bg-white flex justify-center" v-if="can(17)" @tap="toEnrollList" >
        <view class="flex flex-direction align-center justify-around padding-xs">
          <text style="font-size: 60rpx;" class="cuIcon-formfill text-green"></text>
          <text class="text-bold text-black text-df">报名表</text>
        </view>
      </view>

      <view class="flex-sub margin-xs bg-white flex align-center justify-center" v-if="can(19)" @tap="toPayList" >
        <view class="flex-sub margin-xs bg-white flex justify-center">
          <view class="flex flex-direction align-center justify-around padding-xs">
            <text style="font-size: 60rpx;" class="cuIcon-rechargefill text-yellow"></text>
            <text class="text-bold text-black text-df">缴费单</text>
          </view>
        </view>
      </view>
    </view>

    <view class="main-wrap">
      <view style="margin-top: 100rpx;">
        <cu-list :list="serviceList"/>
      </view>
    </view>


  </view>
</template>

<script lang="ts" setup>
import {onShow,onLoad} from "@dcloudio/uni-app";
import {useLogin} from "./useLogin";
import {useStore} from "vuex";
import CuList from '../../components/cu-list/index.vue'
import {useServiceList} from "./useServiceList";
import {onShareAppMessage} from "@dcloudio/uni-app";
import {usePermission} from "../../utils/usePermission"
const { hasLogIn, doLoginOrLogout, avatar, username, isFilledData,ROLE_ID, hasEnroll } = useLogin()
const {serviceList} = useServiceList()
const {can} = usePermission()
const {state, dispatch, commit} = useStore()
onShareAppMessage(() => ({
  title: '汕头开放大学老年大学',
  path: '/pages/index/index'
}))
onShow(()=>{
	if(state.user.isUpdatauserinfo){
		commit("SET_USERINFO",false)
		dispatch("login")
	}
})
function toProfile(){
  if (!hasLogIn.value){
    return
  }
  let url = '/pages/profile/teacher'
  switch (ROLE_ID.value){
    case 0: {
      url = ''
      break
    }

    case 4: {
      url = '/pages/profile/student'
      break
    }
  }
  uni.navigateTo({
    url
  })
}

function toPayList(){
  uni.navigateTo({
    url: '/pages/pay/list'
  })
}

function toEnrollList(){
  // if (!hasEnroll.value){
  //   uni.showModal({
  //     title: '提示',
  //     content: '尚未报名，请前往首页报名'
  //   })
  //   return
  // }
  uni.navigateTo({
    url: `/pages/enroll/notes?n=${encodeURIComponent('/pages/enroll/myList')}`
  })
}

// function toEnrollList(){
//   uni.navigateTo({
//     url: `/pages/enroll/list?`
//   })
// }
</script>

<style scoped lang="scss">
$avatar-size: 134rpx;
.Account{
  .top-wrap{
    position: absolute;
    width: 750rpx;
    height: 493rpx;
    background: linear-gradient(138.46deg, rgba(20, 129, 255, 1) 0%, rgba(52, 145, 255, 1) 68.78%, rgba(103, 171, 249, 1) 100%);
    z-index: -10;
    .bg-circle{
      position: absolute;
      width: 368rpx;
      height: 368rpx;
      border-radius: 50%;
      border: 63rpx solid rgba(255, 255, 255, 1);
      box-sizing: border-box;
      z-index: -10;

      &.left{
        left: -101rpx;
        top: -161rpx;
        opacity: 8%;
      }

      &.right{
        top: 0;
        right: -167rpx;
        opacity: 6%;
      }
    }

    .info-wrap{
      margin-top: 185rpx;
      width: 100%;
      //border: #333333 1px solid;

      .avatar{
        width: $avatar-size;
        height: $avatar-size;
      }

      .text-wrap{

        .status{
          text-align: center;
          border-radius: 1rem;
          padding: 0 1rem;

          &.no {
            background: rgba(185, 217, 254, 1);
          }
        }
      }

      .icon-wrap{
        //border: #1cbbb4 1px solid;
        flex: 1;
      }
    }
  }

  .middle-wrap{
    position: fixed;
    top: 376rpx;
    width: 100vw;
    z-index: 5;
    //border: #333333 1px solid;
    box-sizing: border-box;

    view{
      height: 132rpx;
      top: 0;
      border-radius: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
      box-sizing: border-box;
      //padding: 20rpx;
    }
  }

  .main-wrap{
    position: absolute;
  /*  border: #333333 1px solid; */
    width: 750rpx;
    background: rgb(247, 248, 252);
    top: 442rpx;
    z-index: 1;
    border-radius: 34rpx;
    box-sizing: border-box;
    padding: 30rpx;
  }
}
</style>
